<template>
	<div class="app-main">
		<el-form ref="projectRef" :model="form" :rules="rules" label-width="100px">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12">
					<el-form-item label="项目名称" prop="projectName">
						<el-input v-model="form.projectName" placeholder="请输入项目名称" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12">
					<el-form-item label="项目类型" prop="projectType">
						<el-select v-model="form.projectType" placeholder="请选择项目类型">
							<el-option
								v-for="dict in project_type"
								:key="dict.value"
								:label="dict.label"
								:value="dict.value"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12">
					<el-form-item label="单位名称" prop="organization">
						<el-input v-model="form.organization" placeholder="请输入单位名称" />
					</el-form-item>
				</el-col>
			</el-row>	
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12">
					<el-form-item label="项目组名称" prop="groupName">
						<el-input v-model="form.groupName" placeholder="请输入项目组名称" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12">
					<el-form-item label="项目开始日期" prop="startDate">
						<el-date-picker clearable
							v-model="form.startDate"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="请选择项目开始日期"
							style="width: 100%">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12">
					<el-form-item label="项目导师" prop="mentor">
						<el-input v-model="form.mentor" placeholder="请输入项目导师" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12">
					<el-form-item label="项目结束日期" prop="endDate">
						<el-date-picker clearable
							v-model="form.endDate"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="请选择项目结束日期"
							style="width: 100%">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :xs="24" :sm="24">
			    <el-form-item label="项目组成员" prop="member">
			      <el-input v-model="form.member" placeholder="请输入项目组成员，用逗号分隔" />
			    </el-form-item>
			  </el-col>
			</el-row>
			<el-form-item label="项目描述" prop="description">
				<el-input 
					v-model="form.description" 
					type="textarea" 
					placeholder="请输入500字以内的项目描述"
					:rows="4"
					show-word-limit
					maxlength="500" />
			</el-form-item>
			
			<el-row :gutter="20">
				<el-col :xs="24" :sm="24">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" type="textarea"  placeholder="请输入备注" />
					</el-form-item>
				</el-col>
			</el-row>  
			<el-row :gutter="20">  
				<el-col :xs="24" :sm="24">
					<el-form-item label="公司logo" prop="logoImages">
						<image-upload v-model="form.logoImages" :limit="1"/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		
		<div class="dialog-footer">
			<el-button type="primary" @click="submitForm">确 定</el-button>
			<el-button @click="cancel">关 闭</el-button>
		</div>
	</div>
</template>

<script setup name="ProjectInfo">
import { useRoute } from 'vue-router'
import { getProject, addProject, updateProject } from "@/api/business/project"

const route = useRoute()
const { proxy } = getCurrentInstance()
const { project_type } = proxy.useDict('project_type')

const projectId = ref(null)

const data = reactive({
  form: {},
  rules: {
    projectName: [
      { required: true, message: "项目名称不能为空", trigger: "blur" }
    ],
  }
})

const { form, rules } = toRefs(data)

// 表单重置
function reset() {
  form.value = {
    id: null,
    projectName: null,
    organization: null,
    mentor: null,
    member: null,
    groupType: null,
    projectType: null,
    groupName: null,
    startDate: null,
    endDate: null,
    description: null,
    status: null,
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };  
  proxy.resetForm("projectRef")
}

/** 提交按钮 - 项目信息 */
function submitForm() {
  proxy.$refs["projectRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateProject(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          proxy.$tab.closePage();
        })
      } else {
        addProject(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          proxy.$tab.closePage();
        })
      }
    }
  })
}

// 取消按钮
function cancel() {
  reset();
  proxy.$tab.closePage();
}

/** 读取项目信息 */
function getProjectInfo(id) {
  getProject(id).then(response => {
    form.value = response.data
  })
}

onMounted(() => {
  reset();
  projectId.value = route.query.id || route.params.id
  if (projectId.value) {
    getProjectInfo(projectId.value);
  }
})
</script>

<style scoped>
.app-main {
  padding: 0 20px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.dialog-footer .el-button {
  min-width: 100px;
}
</style>